<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>prepare test</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>

    <x-foo>I am x-foo.</x-foo>
    <template>
      <x-foo></x-foo>
    </template>

    <x-compose></x-compose>

    <polymer-element name="x-foo">
      <script>
        Polymer('x-foo', {
          createdCallback: function() {
            this.super(arguments);
            chai.assert.isTrue(this._elementPrepared, 'prepared by end of createdCallback');
          },
          created: function() {
            chai.assert.isFalse(Boolean(this._elementPrepared), 'do not prepare by created time');
          },
          ready: function() {
            chai.assert.isTrue(this._elementPrepared, 'prepared by ready time');
          },
          attached: function() {
            chai.assert.isTrue(this._elementPrepared, 'prepared by attached time');
          }
        });
      </script>
    </polymer-element>

    <polymer-element name="x-basic" noscript>
      <template>
        I am basic.
      </template>
    </polymer-element>

    <polymer-element name="x-bind-init" attributes="stuff">
      <template>
        <div>stuff: {{stuff}}</div>
      </template>
      <script>
        Polymer('x-bind-init', {
          stuffChanged: function() {
            this.sawStuffChanged = true;
          }
        });
      </script>
    </polymer-element>
    
    <polymer-element name="x-compose">
      <template>
        I am composed.
        <x-basic id="basic"></x-basic>
        <template repeat="{{things}}">
          <x-bind-init stuff="{{stuff}}"></x-bind-init>
        </template>
      </template>
      <script>
        Polymer('x-compose', {
          ready: function() {
            var templateBasic = this.fetchTemplate(this.element).content
                .querySelector('x-basic');
            chai.assert.isFalse(Boolean(templateBasic._elementPrepared), 
                'template element not prepared');
            chai.assert.isTrue(this.$.basic._elementPrepared, 
                'sub-elements prepared by ready time');
            this.onMutation(this.shadowRoot, function() {
              var inits = this.shadowRoot.querySelectorAll('x-bind-init');
              for (var i=0, ii; (i<inits.length) && (ii=inits[i]); i++) {
                chai.assert.isTrue(ii.sawStuffChanged, 'binding while inert triggered side effect');
              }
              done();
            });
            this.things = [
              {stuff: 0},
              {stuff: 1},
              {stuff: 2}
            ];
          }
        });
      </script>
    </polymer-element>

  </body>
</html>
